<template>
  <div class="note-view">
    <note-layout>
      <div class="content">
        <!-- 标签栏 -->
        <editor-tabs v-if="settingsStore.settings.editor.enableMultipleNotes" />
        <note-editor />
      </div>
    </note-layout>
  </div>
</template>

<script setup lang="ts">
import {useEditorStore} from '@/stores/editor'
import {useSettingsStore} from '@/stores/settings'
import NoteEditor from '@/components/editor/NoteEditor.vue'
import EditorTabs from '@/components/editor/EditorTabs.vue'
import NoteLayout from "@/components/layout/NoteLayout.vue";

const editorStore = useEditorStore()
const settingsStore = useSettingsStore()
</script>

<style lang="scss" scoped>
.note-view {
  width: 100%;
  height: 100%;
  display: flex;
  background: var(--el-bg-color);

  .sidebar {
    width: 260px;
    height: 100%;
    border-right: 1px solid var(--el-border-color-light);
    display: flex;
    flex-direction: column;

    .sidebar-header {
      flex-shrink: 0;
      padding: 16px;
      border-bottom: 1px solid var(--el-border-color-light);
    }

    .folder-tree {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
  }

  .content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.folder-node {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
